<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-案例</title>
</head>
<body>

    <img id="light" src="./图片素材/off.gif"> <br>

    <input id = "bt1" type="button" value="点亮" > 
    <input type="button"  value="熄灭" onclick="off()">

    <br> <br>

    <input type="text" id="name" value="ITCAST" onblur="onBig()" >
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input id="bt3" type="button" value="全选" > 
    <input type="button" value="反选" onclick="onRev()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; 
    document.getElementById('bt1').onclick = function(){
        document.getElementById('light').src = "./图片素材/on.gif";
    };

    function off(){
        document.getElementById('light').src="./图片素材/off.gif";
    }

    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; 
    document.getElementById('name').onfocus = function(){
        var strObj = document.getElementById('name');
        var str = strObj.value;
        strObj.value = str.toLowerCase();
    }

    function onBig(){
        var strObj = document.getElementById('name');
        strObj.value = strObj.value.toUpperCase();
    }

    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    document.getElementById('bt3').onclick = function(){
        var arr = document.getElementsByName('hobby');
        for (let i = 0; i < arr.length; i++) {
            arr[i].checked = true;
        }
    }

    function onRev(){
        var arr = document.getElementsByName('hobby');
        for (let i = 0; i < arr.length; i++) {
            var temp = arr[i].checked;
            if(temp){
                arr[i].checked = false;
            }else{
                arr[i].checked = true;
            }
        }
    }
</script>
</html>